import { Component,Directive,Input,Output,TemplateRef,ContentChild,ContentChildren,QueryList,EventEmitter } from '@angular/core';



/**Tab标题指令*/
/***
@Directive({
	selector:'ng-template[tabTitle]'
})
export class TabTitle{
	
	constructor(private templateRef:TemplateRef<any>){}
}
***/


/**Tab内容指令*/
@Directive({
	selector:'ng-template[tabContent]'
})
export class TabContent{
	
	constructor(private templateRef:TemplateRef<any>){}
}

/**Tab指令*/
@Directive({
	selector:'tab'
})
export class Tab{

//tab的标题
@Input()title:string;

/**@ContentChild(TabTitle)titleTpl:TabTitle;*/

//tab的面板内容
@ContentChild(TabContent)contentTpl:TabContent;
	
}

/**tabs组件*/
@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.css']
})
export class TabsComponent{

  /**所有的标签，当前活动标签的id，标签变更事件*/
  @ContentChildren(Tab)tabs:QueryList<Tab>;
  @Input()activeId:number;
  @Output()tabChange=new EventEmitter<any>();

  constructor() { }
     
  ngOnInit() {
     
  }
 
  /********
  select(tabId:string,index){
     if(this.activeId===tabId) return;
     this.activeId=tabId;
     this.tabChange.emit({activeId:this.activeId,index:index});
  }
  ngAfterContentInit(){
      //初次加载设定activeId的默认值是第一个Tab的id
      this.activeId=this.activeId ? this.activeId : this.tabs.first.id ;
      this.tabChange.emit({activeId:this.activeId,index:0});
  }
  */

  select(index){
     if(this.activeId===index) return;
     this.activeId=index;
     this.tabChange.emit({index:this.activeId});
  }
  ngAfterContentInit(){
      /**初次加载设定activeId的默认值是0(加载第一个Tab)*/
      this.activeId=this.activeId ? this.activeId :0 ;
      this.tabChange.emit({index:0});
  }


  //根据tab的id获取tab对象

}
